<template>
  <div class="search-head">
    <van-nav-bar
      title="标题"
      left-arrow
      right-text="取消"
      fixed
      clearable
      @click-right="onClickRight"
      @click-left="onClickLeft"
    >
      <template #title>
        <van-search
          v-model.trim="inp"
          placeholder="请输入搜索关键词111"
          shape="round"
          @update:model-value="getInpValue()"
          @search="handlSearch"
        />
      </template>
    </van-nav-bar>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
export default {
  name: 'FissionFriendsH5SearchHead',
  setup() {
    const inp = ref('')
    const onClickLeft = () => history.back()
    const onClickRight = () => (inp.value = '')
    const router = useRouter()
    const getInpValue = () => {
      // console.log(inp.value)
    }
    const handlSearch = () => {
      console.log('handlSearch')
      router.push({name:'searchFollow'})
    }
    return {
      onClickLeft,
      onClickRight,
      getInpValue,
      handlSearch,
      inp
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .van-search {
  padding: 0;
}
</style>
